import React from 'react'
import {connect} from 'react-redux'
import {Icon} from "antd-mobile"
import '../OnLiveHeader.css'
import FullSizeIcon from "../../../../../../res/images/web/live-room/full-size-icon.png";
import SharePopup from "../../../../../game-room/components/Header/SharePopup/SharePopup";
import FireIcon from "../../../../../../res/images/web/shared/fire.png";
import ShareIcon from "../../../../../../res/images/web/shared/share-icon.png"


const OnLiveHeaderNormal = props => {

    const {
        history,
        liveDetail,
        VideoPlayer,
    } = props


    // 图标
    const goBackIcon = (
        <div className='live-room-header-player-go-back-icon'>
            <Icon
                type='left'
                color='#fff'
                size='lg'
                onClick={() => history.goBack()}
            />
        </div>
    )

    const shareIcon = (
        <div className='live-room-header-player-share-icon'>
            <img
                onClick={() => props.onShowShare()}
                src={ShareIcon}
                alt=''
            />
        </div>
    )

    const fullSizeIcon = (
        <div className='live-room-header-player-full-size-icon'>
            <img
                onClick={() => props.fullSize()}
                src={FullSizeIcon}
                alt=''
            />
        </div>
    )

    const normalVideoTemplate = (
        <div
            className='live-room-header-player-ctn'
        >
            {VideoPlayer}
            <SharePopup
                showSharePopup={props.showSharePopup}
                hideSharePopup={props.hideSharePopup}
            />
            {goBackIcon}
            {shareIcon}
            {fullSizeIcon}
            <div className='live-room-header-player-info live-room-header-info'>
                <h3>首届落山灰比赛拉开帷幕</h3>
                <div className='flex'>zz
                    <p>房号: {liveDetail.Id}</p>
                    <div className='flex'>
                        <img src={FireIcon} alt=''/>
                        <p>3456</p>
                    </div>
                </div>
            </div>
        </div>
    )

    return normalVideoTemplate
}

const mapState = state => ({
    // dialogues: state.chat.dialogues,
    userDetail: state.user.userdetail,
})

export default connect(mapState)(OnLiveHeaderNormal)
